﻿@{
    ViewBag.Title = "Create";
}
<script>
    $(document).ready(function () {
        $("#loadBgr").hide();
        $('input[type=file]').bootstrapFileInput();
        $('#myfile').bind('change', function () {
            var filename = $('#myfile').val();
            var extension = filename.replace(/^.*\./, '');
        if (extension == filename) {
            extension = '';
        } else {
            extension = extension.toLowerCase();
        }

        switch (extension) {
            case 'xls':
                break;
            case 'xlsx': 
                break;

            default:
                alert('Please import by Excel Workbook file!');
                window.location = "@Url.Content("~/Participant/Import")";
        }
            if (this.files[0].size > 500000) {
                alert('Your file is out of size!');
                window.location = "@Url.Content("~/Participant/Import")";
            }
        });
        $('#submitFile').click(function (e) {
                        alert('Please select the file.');
                    });
        $("#loadImage").hide();
        $('#myfile').fileupload({
            url: '@Url.Content("~/Participant/Import")',
            dataType: 'json',
            autoUpload: true,
            limitMultiFileUploads: 1,
            singleFileUploads: true,
            add: function (e, data) {
                    data.context = $('#submitFile');
                    $("#submitFile").unbind('click');
                    $('#submitFile').click(function (e) {
                         $("#loadImage").show();
                        $("#loadBgr").show();
                        e.stopPropagation();
                        data.submit();
                    });
                },
            done: function (e, data) {
                    if (data.result.success) {
                        if(data.result.error != '') {
                            alert(data.result.error);
                        }
                        window.location = "@Url.Content("~/Participant/ImportResult")";
                    } else {
                        alert(data.result.error);
                        window.location = "@Url.Content("~/Participant/Import")";
                    } 
            },
            fail: function (e, data) {
                if (typeof (error) == 'undefined') {
                    console.log("Upload error");
                    console.log(e);
                    console.log(data);
                }
                else {
                    error(e, data);
                }
            }
        });
    });
</script>
@{
    if (ViewBag.Msg != null)
    {
    <script>        alert("@ViewBag.Msg")</script>
    }
}
<div id="loadBgr" style="min-width: 100%; z-index: 5; background-color: rgba(253, 253, 253, 0.29); height: 100%; position: absolute; display: block; left: 0px; top: 0px"></div>
<div class="site_map">
    @Html.ActionLink("Home", "Index", "Home") / @Html.ActionLink("Subjects", "Index", "Subject")
    / Import Participants
</div>
<br />
<div class="main_nav">
    <span>
        <a href="@Url.Content("~/Subject/Index")">
            <img src="@Url.Content("~/Images/back button.png")"/>
        </a>
    </span>
</div>
<br />
<form onsubmit="return false">
    <table class="table table-bordered">
        <tr>
            <td style="width: 150px; text-align: right">
                File
            </td>
            <td>
                <input type="hidden" name="subjectId" value="@ViewBag.SubjectId"/>
                <input type="file" name="FileUpload" title="Browse" id="myfile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
                <img src="@Url.Content("~/Images/loading.gif")" id="loadImage" width="28px"/>
            </td>
        </tr>
        <tr>
                <td></td>
                <td>Maximum size of file: 500KB</td>
        </tr>
        <tr>
            <td style="text-align: right">
            </td>
            <td>@Html.ActionLink("Download Template", "DownloadTemplate")
            </td>
        </tr>
        <tr>
            <td style="text-align: right">
            </td>
            <td>
                <button type="submit" value="Import" id="submitFile" class="btn" style="width: 80px">
                    Import</button>
                @Html.ActionLink("Reset", "Import", null, new { @class = "btn", style = "width:54px" })
                @Html.ActionLink("Cancel", "Index", "Subject", null, new { @class = "btn", style = "width:54px" })
            </td>
        </tr>
    </table>                        
</form>